<script lang="ts" setup>
import imgSrc from "@/assets/js/ImageUrlManage";
import IRequest from "@/config/request";
import wx from "weixin-js-sdk";

const router = useRouter();
const showPopup = ref(false)
const showQr = ref(false)
const list = [
  {
    title: "江天暮雪光影剧场",
    subTitle: "沉浸式湖湘美学演艺体验",
    img: "img2",
    detailUrl: "https://mp.weixin.qq.com/s/4dGVMNGXiBhf2Pu8LZ0phw",
    imgUrl: "https://weixin.qq.com/sph/AcY7vuEbC",
    miniUrl: "gh_cbe8503ac9f5",
    pagePath: "pages/two-template/spot/spotDetail?id=80e92f52e6b64e538384343da8178b98",
  },
  {
    title: "湘江游船",
    subTitle: "白天赏红色风光，夜晚观璀璨夜景",
    img: "img1",
    detailUrl: "https://mp.weixin.qq.com/s/vWWdh3bHDiB_Ih4DjxirJw",
    imgUrl: "https://weixin.qq.com/sph/AcY7vuEbC",
    miniUrl: "",
    pagePath: "",
  },
  {
    title: "小火车游览",
    subTitle: "轻松环洲游览",
    img: "img3",
    miniUrl: "",
    pagePath: "",
  },
  {
    title: "非遗展览馆",
    subTitle: "湖湘文化体验",
    img: "img4",
    pagePath: "",
  },
  {
    title: "青春剧场《恰同学少年》",
    subTitle: "红色沉浸式演出体验",
    img: "img5",
    miniUrl: "",
    pagePath: "",
  },
];
const getIcon = (icon) => {
  return imgSrc.show[icon];
};
const goBack = () => {
  router.back();
};
const linkTo = async (index: number, prop: string) => {
  // window.open(list[index].imgUrl)
  if (prop === "imgUrl") {
  } else if (prop === "miniUrl") {
  } else {
    list[index][prop] && (window.location.href = list[index][prop]);
  }
};
// appId:服务号
const initWxConfig = async (appId = "wx8ad14107b8392746") => {
  const { data } = await IRequest.get({
    url: `/cozemp/wx/jsapi/${appId}/getJsapiTicket`,
    params: { url: window.location.href },
  });
  wx.config({
    debug: false,
    appId,
    timestamp: data.timestamp,
    nonceStr: data.nonceStr,
    signature: data.signature,
    jsApiList: [],
    // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp','wx-open-launch-app']
    openTagList: ["wx-open-launch-weapp", "wx-open-audio"],
  });
  wx.ready(function () {
    var btn = document.getElementById("launch-btn");
    btn.addEventListener("launch", function (e) {
      console.log("success");
    });
    btn.addEventListener("error", function (e) {
      console.log("fail", e.detail);
    });
  });
  wx.error(function (res) {
    console.log("失败", res);
  });
};
onMounted(() => {
  initWxConfig();
});
</script>

<template>
  <div class="show">
    <div class="header">
      <van-icon
        class="back"
        size="24"
        color="#29898e"
        name="arrow-left"
        @click="goBack"
      />
      <p class="header-title">橘子洲AI客服</p>
      <div class="avatar" style="margin-left: auto;">
        <img class="service" src="@/assets/images/index/service.svg" alt="" @click="showPopup = true" />
      </div>
    </div>
    <p class="pt52"></p>
    <div class="item" v-for="(item, index) in list" :key="index">
      <div class="info">
        <div class="imgWrap">
          <img
            class="img"
            :src="getIcon(item.img)"
            alt=""
            @click="linkTo(index, 'imgUrl')"
          />
        </div>
        <h2 class="title">{{ item.title }}</h2>
        <p class="subTitle">{{ item.subTitle }}</p>
      </div>
      <div class="bottom" v-if="index === 0">
        <div class="left">
          <p class="tips mb4">日游：<span class="price">￥99/人</span></p>
          <p class="tips mb4">夜秀：<span class="price">￥129/人</span></p>
        </div>
        <div class="right flex-row">
          <van-button
            size="small"
            color="#11a6a6"
            class="mr10"
            @click="linkTo(index, 'detailUrl')"
            >详情介绍</van-button
          >
          <div class="btn-wrap" v-if="item.miniUrl">
            <van-button size="small" color="#0d8181" @click="linkTo(index, 'miniUrl')"
              >立即购票</van-button
            >
            <div class="bottom-button">
              <!-- :appid="item.miniUrl" -->
              <wx-open-launch-weapp
                id="launch-btn"
                :username="item.miniUrl"
                :path="item.pagePath"
                style="display: block; height: 100%"
              >
                <component
                  :is="'script'"
                  type="text/wxtag-template"
                  style="display: block; height: 35px; width: 100%"
                >
                  <button
                    style="height: 35px; width: 100%; border: none; padding: 0; margin: 0"
                  >
                    确定
                  </button>
                </component>
              </wx-open-launch-weapp>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom" v-if="index === 1">
        <div class="left">
          <p class="tips mb4">日游时间：16:00</p>
          <p class="tips mb4">日游时间：20:00</p>
        </div>
        <div class="right">
          <van-button size="small" color="#11a6a6" class="mr10">详情介绍</van-button>
          <van-button size="small" color="#0d8181" @click="showQr = true">立即购票</van-button>
        </div>
      </div>
      <div class="bottom" v-if="index === 2">
        <div class="left"></div>
        <div class="right">
          <van-button size="small" color="#0d8181" @click="showQr = true">立即购票</van-button>
        </div>
      </div>
      <div class="bottom" v-if="index === 3">
        <div class="left">
          <p class="free">免费参观</p>
        </div>
        <div class="right"></div>
      </div>
      <div class="bottom" v-if="index === 4">
        <div class="left">
          <p class="tips mb4"><span class="price">￥198/人</span></p>
        </div>
        <div class="right">
          <van-button size="small" color="#11a6a6">预定演出</van-button>
        </div>
      </div>
    </div>
  </div>
  <van-popup v-model:show="showPopup" round>
    <div class="qrcode-wrap">
      <img class="qrcode" src="@/assets/images/index/qrcode.svg" alt="">
    </div>
  </van-popup>
  <van-popup v-model:show="showQr" round>
    <div class="qrcode-wrap">
      <img class="qrcode" src="@/assets/images/index/qr1.png" alt="">
    </div>
  </van-popup>
</template>

<style lang="scss" scoped>
.service {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 70px;
  height: 70px;
}
.qrcode-wrap{
  padding: 40px;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  .qrcode{
    width: 161px;
    height: 159px;
  }
}
.show {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #faf5ff 0%, #ffffff 100%), rgba(0, 0, 0, 0);
  position: relative;
  .item {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
    // background: #fff;
    background: #ffffff rgba(0, 0, 0, 0.001);
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    .imgWrap {
      width: 100%;
      position: relative;
      .img {
        width: 100%;
        height: fit-content;
        border-radius: 16px;
        margin-bottom: 16px;
      }
    }
    .title {
      font-size: 18px;
      color: #000000;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .subTitle {
      font-size: 14px;
      color: #4b5563;
      margin-bottom: 10px;
    }
    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price {
        font-weight: bold;
        color: #29898e;
      }
      .free {
        color: #29898e;
        font-weight: 500;
      }
      .tips {
        color: #6b7280;
      }
      .btn-wrap {
        position: relative;
        .bottom-button {
          height: 100%;
          opacity: 0;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
  }
}
</style>
